<template>
    <div>
        <Modal v-model="data.isShow" :mask-closable="false" width="360">
			<p slot="header" class="header-view">修改手机号</p>
			<div class="main-view">
                <Form ref="formInline" :model="data.data" :rules="ruleInline" :label-width="80">
                    <FormItem label="密码" prop="password">
                        <Input type="password" v-model="data.data.password" placeholder="请输入密码" class="input"></Input>
                    </FormItem>
                    <FormItem label="新手机号" prop="phone">
                        <Input type="text" v-model="data.data.phone" :maxlength="11" placeholder="请输入新手机号" class="input" style="width: 60%;"></Input>
                        <Button style="float: right;width: 38%;" :disabled="disabled" @click="clickVcode">{{vodeText}}</Button>
                    </FormItem>
                    <FormItem label="验证码" prop="vcode">
                        <Input type="text" v-model="data.data.vcode" placeholder="请输入验证码" class="input"></Input>
                    </FormItem>
                </Form>
			</div>
            <div slot="footer">
				<Button type="primary" :isLoading="data.isLoading" @click="clickSubmit">确定</Button>
				<Button @click="data.isShow = false">取消</Button>
			</div>
		</Modal>
    </div>
</template>

<script>
var phoneReg = /^(((13[0-9]{1})|(14[0-9]{1})|(15[0-9]{1})|(17[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
import accountService from '@/network/service/accountService.js'
    export default {
        props: ['data'],
        data() {
            return {
                vodeText: '发送验证码',
                disabled: false,
                ruleInline: {
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' }
                    ],
                    phone: [
                        { required: true, message: '请输入新手机号', trigger: 'blur' },
                        { pattern: phoneReg, message: '请正确输入手机号', trigger: 'blur' }
                    ],
                    vcode: [
                        { required: true, message: '请输入验证码', trigger: 'blur' }
                    ]
                }
            }
        },
        methods: {
            clickVcode() {
                this.sendVCode();
            },
            clickSubmit() {
                this.$refs['formInline'].validate((valid) => {
                    if (valid) {
                        this.$emit('on-submit', this.data);
                    } else {
                        this.$Message.error('表单验证失败!');
                    }
                })
            },

            sendVCode() {
                let params = {
                    phone: this.data.data.phone,
                    type : 2
                }
                accountService.sendVCode(params).then(res => {
                    let result = res.data;
                    let code = result.rescode;
                    let resmsg = result.msg;
                    if (code == 100) {
                        this.$Message.success('验证码发送成功');
                        this.disabled = true;
                        let num = 59;
                        let timer;
                        this.vodeText = num + '秒'
                        timer = setInterval(() => {
                            num--;
                            if (num == 0) {
                                num = 59;
                                this.disabled = false;
                                clearInterval(timer);
                                this.vodeText = '发送验证码';
                            } else {
                                this.vodeText = num + '秒'
                            }
                        }, 1000)
                    } else {
                        this.$Message.error(resmsg);
                    }
                }, error => {
                    this.$Message.error('服务器异常，请稍后再试')
                })
            }
        }
    }
</script>

<style scoped lang="less">
.header-view {
    text-align: center;
}
.main-view {
    // text-align: center;
    .input {
        border: .01rem solid #D5CED2;
        border-radius: 5px;
        color: #433e41;
    }
}
</style>